<script>
import { h } from 'vue'

export default {
  name: 'XtxBread',
  render () {
    // 获取虚拟dom插槽的所有子组件
    const diffSlots = this.$slots.default()
    // 保存带i标签的虚拟dom
    const _template = []
    // 在默认插槽的所有虚拟dom
    diffSlots.forEach((v,i) => {
      //当前虚拟dom当前项追加到新的dom数组
      _template.push(v)
      //如果虚拟dom不是最后一项，就追加虚拟dom i箭头标签
      if(i !==  diffSlots.length-1) _template.push(h('i',{class:'iconfont icon-angle-right'}))
    })
    //render函数return什么就渲染什么
    return h('div',{class:'xtx-bread'},_template)
  }
}
</script>

<style scoped lang='less'>
.xtx-bread {
  display: flex;
  padding: 25px 10px;
}
i {
  font-size: 12px;
  margin-left: 5px;
  margin-right: 5px;
  line-height: 22px;
}
</style>
